<!DOCTYPE html>
  <html  lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
            <link href="../css/mui.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="../css/map.css"/>
      <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>

      <link rel="stylesheet" type="text/css" href="../css/mescroll.min.css"/>


      <style>
          html,body{
              height: 100%;
              /*overflow: auto;*/
          }
          .mui-content {
            background-color: #fff;
          }
          /*#tabview {
            margin-top: 8rem;
          }*/
          .mui-table-view {
            margin: 10px 0px;
            /*border: 1px solid #ccc;*/
            /*border-bottom: 0;*/
            padding: 0px 4px;
          }
          /*.mui-table-view:last-child {
            margin-bottom: 0;
            background-color: red;
          }*/
          .tableListone {
            display: inline-block;
            /*padding: 4px 0px;*/
          }
          .tableListtwo {
            display: inline-block;
            padding-left: 15px;
          }
          .tableLine {
            padding: 4px 0px;
          }
          .normal {
            color: green;
          }
          .abnormal {
            color: red;
          }
          .lookup {
            position: absolute;;
            z-index: 2;
            left: 0;
            top: 0;
            /*padding: 10px;*/
            background: #eee;
          }
          .mui-col-xs-7 {
            width: 50%;
          }
          /*.mui-btn {
            width: 100%;
          }*/
          /*.mui-scroll {
            top: 10px;
          }*/
          .mui-dtpicker-header:after {
            clear: both;
            content: '';
            display: block;
            height: 0;
            width: 0;
          }
          .mui-dtpicker-title h5 {
            font-weight: 400;
            color: #8f8f94;
            font-size: 14px;
          }
          .mui-dtpicker .mui-picker {
            float: left;
          }
          .mescroll {
            position: fixed;
            top: 170px;
            bottom: 0;
            height: auto;
          }
      </style>
  </head>
  <body>
    <div id="main">
      <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        <div class="lookup">
            <div class="mui-col-xs-7">
              <label style="font-size: 14px;" class="text">BeginDate</label>
              <input id="BeginDate" readonly value="" data-options='{"type":"date"}' style="float: left; width: 100%;" readonly class="mui-input-clear">
           </div>
          <div class="mui-col-xs-7">
            <label style="font-size: 14px;" class="text">EndDate</label>
            <input id="EndDate" readonly value="" data-options='{"type":"date"}' style="float: left; width: 100%;" readonly  class="mui-input-clear">
          </div>
          <div class="mui-col-xs-7" id="muiRow2">

          </div>
          <div class="mui-col-xs-7" id="muiContent">

          </div>
          <div style="width: 100%; padding: 10px;">
            <button type="button" class="mui-btn" style="height: 34px; padding: 0px; width: 100%;"  id="Search">Search</button>
          </div>
        </div>
        <div class="mescroll" id="mescroll">
          <!--数据列表-->
          <ul class="mui-table-view-chevron" id="tabview">
          </ul>
        </div>
      </div>
    </ul>
    </div>
  </body>
  <script id="template2" type="text/x-dot-template">
      <select onchange="select1('select2')" id="select2" style="width: 100%; height: 34px;">
        <option value="">CarType</option>
          {{ for (var prop in it) { }}
        <option value={{=it[prop].id}}>{{=it[prop].name}}</option>
          {{ } }}
      </select>
  </script>
  <script id="template3" type="text/x-dot-template">
      <select onchange="select2('select3')" id="select3" style="width: 100%; height: 34px;">
        <option value="">Organization</option>
          {{ for (var prop in it) { }}
        <option value={{=it[prop].id}}>{{=it[prop].Name}}</option>
          {{ } }}
      </select>
  </script>
  <script id="template" type="text/x-dot-template">
  {{ for (var key in it) { }}
  <div class="mui-table-view">
    <div class="tableLine">
      <span class="tableListone" style="font-weight: bold;">{{=it[key].PlateNumber}}</span>
    </div>
     <div class="tableLine">
      {{? it[key].worktime === '' || it[key].worktime == null}}
       <span class="tableListone">Departure-Knocking-OffTime：</span> <span class="abnormal">No Data</span>
        {{??}}
      <span class="tableListone">Departure-Knocking-OffTime：</span> <span>{{=it[key].worktime}}</span>
      {{?}}
     </div>
    <div class="tableLine">
    {{? it[key].travelMileage === '' || it[key].travelMileage == null}}
      <span class="tableListone">Drive mileage：</span> <span>0 KM</span>
      {{??}}
      <span class="tableListone">Drive mileage：</span> <span>{{=it[key].travelMileage}} KM</span>
      {{?}}
    </div>
    <div class="tableLine">
    {{? it[key].cleanednum === '' || it[key].cleanednum == null }}
      <span class="tableListone">Amount of Bins Cleaned：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Amount of Bins Cleaned：</span> <span>{{=it[key].cleanednum}}</span>
      {{?}}
    </div>
    <div class="tableLine">
    {{? it[key].FuelConsumption === '--' || it[key].FuelConsumption == null }}
      <span class="tableListone">Fuel Consumption：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Fuel Consumption：</span> <span>{{=it[key].FuelConsumption}} L</span>
      {{?}}
    </div>
    <div class="tableLine">
    {{? it[key].RefuelingCapacity === '--' || it[key].RefuelingCapacity == null }}
      <span class="tableListone">Refueling capacity：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Refueling capacity：</span> <span>{{=it[key].RefuelingCapacity}} L</span>
      {{?}}
    </div>
    <div class="tableLine">
      {{? it[key].FuelConsumptionPer100KM === '--' || it[key].FuelConsumptionPer100KM == null }}
      <span class="tableListone">FuelConsumptionPer100KM：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">FuelConsumptionPer100KM：</span> <span>{{=it[key].FuelConsumptionPer100KM}}</span>
      {{?}}
    </div>
    <div class="tableLine">
      {{? it[key].parkViolations === '' || it[key].parkViolations == null }}
      <span class="tableListone">Timeout Parking Times：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Timeout Parking Times：</span> <span class="abnormal">{{=it[key].parkViolations}}</span>
      {{?}}
    </div>
    <div class="tableLine">
      {{? it[key].oilabnormal === '' || it[key].oilabnormal == null }}
      <span class="tableListone">Abnormal Times of Fuel Amount：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Abnormal Times of Fuel Amount：</span> <span class="abnormal">{{=it[key].oilabnormal}}</span>
      {{?}}
    </div>
    <div class="tableLine">
      {{? it[key].OverspeedTime === '' || it[key].OverspeedTime == null }}
      <span class="tableListone">Overspeeding Times：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Overspeeding Times：</span> <span class="abnormal">{{=it[key].OverspeedTime}}</span>
      {{?}}
    </div>
  </div>
  {{ } }}
  </script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/doT.min.js"></script>
  <script type="text/javascript" src="../script/ajax.js"></script>
  <script type="text/javascript" src="../script/mui.min.js"></script>
  <script type="text/javascript" src="../script/mui.picker.min.js"></script>
  <script type="text/javascript" src="../script/mescroll.min.js"></script>
  <script type="text/javascript" src="../script/time.js"></script>
  <script type="text/javascript" src="../script/bbb.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>

  <script type="text/javascript">
      apiready = function(){
        var tabview = $api.byId('tabview');
        var muiContent = $api.byId('muiContent');
        var BeginDate = $api.byId('BeginDate');
        var EndDate = $api.byId('EndDate');
        var Search = $api.byId('Search');
        BeginDate.value = getNowFormatDate();
        EndDate.value = getNowFormatDate();

        var template = $api.byId('template');
        var template2 = $api.byId('template2');
        var template3 = $api.byId('template3');

        var interText = doT.template(template.innerHTML);
        var interText2 = doT.template(template2.innerHTML);
        var interText3 = doT.template(template3.innerHTML);

        var query = $api.getStorage('query');
        var nowDate = '';
        var istrue = true;
        getTypeId(interText2)
        getId(interText3);
        // BeginDate.addEventListener('click', function() {


          // api.openPicker({
          //     type: 'date',
          //     // date: '2014-05-',
          //     title: 'Selection time'
          // }, function(ret, err) {
          //     if (ret) {
          //     BeginDate.value = getDate(ret);
          //         // alert(JSON.stringify(ret));
          //     } else {
          //         // alert(JSON.stringify(err));
          //     }
          // });
        // });
        // EndDate.addEventListener('click', function() {
        //   api.openPicker({
        //       type: 'date',
        //       // date: '2014-05-',
        //       title: 'Selection time'
        //   }, function(ret, err) {
        //       if (ret) {
        //         EndDate.value = getDate(ret);
        //       }
        //   });
        // });
        var beginTime, endingTime, Org, CarType;
        Search.addEventListener('click', function() {
          CarType = select1('select2');
          Org = select1('select3');
          // console.log(BeginDate.value)
          var startTime = new Date(BeginDate.value);
          var endTime = new Date(EndDate.value);
          let stamp = 1000 * 60 * 60 * 24;
          var nDate = new Date(getNowFormatDate());
          // console.log((endTime - startTime) / stamp)
          if (BeginDate.value === EndDate.value) {
            // nowDate = EndDate.value;
            // getNowDate(PlateNumber);
            nowDate = BeginDate.value;
            istrue = true;
            tabview.innerHTML = '';
            mescroll.resetUpScroll();
          } else {
            // console.log(endTime)
            if (startTime > endTime || endTime - nDate >= 0) {
              // if (endTime - nDate >= 0) {
                api.toast({
                   msg: 'The end date cannot be greater than or equal to today',
                   duration: 3000,
                   location: 'middle'
                 });
                 return false;
              //  }
              } else {
              beginTime = BeginDate.value;
              endingTime = EndDate.value;
              istrue = false;
              tabview.innerHTML = '';
              mescroll.resetUpScroll();
            }
          }
        });
        //  单日查询
        function getNowDate(page) {
          if (istrue) {
            getListDataFromNet(nowDate, Org, CarType, page.num, page.size, function (curPageData) {
              mescroll.endByPage(page.size, curPageData.length);
            });
          } else {
            getInterDay(beginTime, endingTime,  Org, CarType, page.num, page.size, function (curPageData) {
              mescroll.endByPage(page.size, curPageData.length);
            });
          }
        }
        //  跨天查询
        function getInterDay(beginTime, endingTime, Org, CarType, page, pageSize, successCallback) {
          if (Org === '') {
            Org = query.Org;
          }
          if(typeof CarType === 'undefined') {
            CarType = '';
          } else {
            CarType = CarType;
          }
          api.ajax({
            url: 'http://223.255.10.50:8029/dsp-ShateApp-ui/carinfo/app/findWorkloadByDate.action',
            method: 'get',
            data: {
              values: {
                page: page,
                Organization: Org,
                vehicleType: CarType,
                startDate: beginTime,
                endDate: endingTime,
                row: pageSize
              }
            }
            }, function(ret, err) {
              if (ret) {
                if (ret.data.rows.length === 0) {
                  mescroll.endByPage(pageSize, ret.data.totalpage);
                  tabview.innerHTML = '';
                  successCallback(ret.data.rows)
                  return  false;
                }
                mescroll.endByPage(pageSize, ret.data.totalpage);
                tabview.innerHTML += interText(ret.data.rows);
                successCallback(ret.data.rows)
              } else {
                alert('Server exception');
              }
          });
        }
        //  单日查询
        function getListDataFromNet(nowDate, Org, CarType, page, pageSize, successCallback) {
          if (nowDate === '') {
            nowDate = getNowFormatDate();
          } else {
            nowDate = nowDate;
          }
          if (typeof Org === 'undefined') {
            Org = query.Org;
          } else {
            Org = Org;
            // console.log(Org)
          }
          if (CarType === '' || typeof CarType == 'undefined') {
            CarType = '';
          } else {
            CarType = CarType;
          }
          api.ajax({
            url: 'http://223.255.10.50:8029/dsp-ShateApp-ui/carinfo/app/findWorkloadDay.action',
            method: 'get',
            data: {
              values: {
                page: page,
                organization: Org,
                vehicleType: CarType,
                date: nowDate,
                row: pageSize
              }
            }
            }, function(ret, err) {
              if (ret) {
                // console.log(JSON.stringify(ret))
                // if (ret.data.rows.length === 0) {
                //   mescroll.endByPage(pageSize, ret.data.total);
                //   successCallback(ret.data.rows)
                //   tabview.innerHTML = '';
                //   return  false;
                // }
                  if (ret.data.page < ret.data.totalpage) {
                    // mescroll.endByPage(pageSize, ret.data.totalpage);
                    tabview.innerHTML += interText(ret.data.rows);
                    successCallback(ret.data.rows)
                  } else {
                    // mescroll.endByPage(pageSize, ret.data.total);
                    mescroll.endByPage(pageSize, ret.data.totalpage);
                    tabview.innerHTML += interText(ret.data.rows);
                    // successCallback(ret.data.rows)
                  }
              } else {
                mescroll.endErr();
                alert('Server exception');
                  // api.alert({ msg: JSON.stringify(err.msg) });
              }
          });
        }
        //  初始化
          var mescroll = new MeScroll("mescroll", {
            //第一个参数"mescroll"对应上面布局结构div的id
            //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
            //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
            down: {
              use: false
            },
            up: {
              auto: true,
              callback: getNowDate, //上拉加载的回调
              noMoreSize: 5,
              htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">Loading..</p>',
              isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
            }
        });
      };
  </script>
  </html>
